<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding:0
        }

        table{
            width: 800px;
            text-align: center;
            margin: 30px auto;

        }
    </style>
</head>
<body>
    <div id="app">
        <form>
            姓名: <input type="text" v-model="UserInfo.name" > <br/>
            性别: 
                男<input type="radio" value="男" v-model="UserInfo.gender"> 
                女<input type="radio" value="女" v-model="UserInfo.gender"> <br/>
            年龄: <input type="text" v-model="UserInfo.age"> <br/>
            成绩: <input type="text" v-model="UserInfo.score"> <br/>
            <button v-if="isEdit"  @click.prevent="editFunc">编辑</button>
            <button v-if="isEdit" @click.prevent="cancelFunc">取消编辑</button>
            <button v-if="!isEdit" @click.prevent="submitHandler">确认添加</button>
        </form>
        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>全选<input type="checkbox" v-model="allBtn"></th>
                    <th>ID
                        <span @click="sortFunc('id','asc')">升</span>
                        <span @click="sortFunc('id','desc')">将</span>
                    </th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄
                        <span @click="sortFunc('id','asc')">升</span>
                        <span @click="sortFunc('id','desc')">将</span>
                    </th>
                    <th>成绩
                        <span @click="sortFunc('id','asc')">升</span>
                        <span @click="sortFunc('id','desc')">将</span>
                    </th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td><input type="checkbox" v-model="item.is_select"></td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.gender}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.score}}</td>
                    <td>
                        <button @click="showEdit(item)">编辑</button>
                        <button @click="delFunc(item.id)">删除</button>

                    </td>

                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>全选<input type="checkbox" v-model="allBtn"></td>
                    <td colspan="4"></td>
                    <td>平均成绩: <span>{{avgScore.toFixed(1)}}</span></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>

    <script src="./vue.global.js"></script>
    <script>
        //准备表格数据  
        const data = [
            {id:1,is_select:false,name:'Miguel Ward',age:19,score:99,gender:'男'},
            {id:2,is_select:false,name:'Dollie Howell',age:36,score:89,gender:'男'},
            {id:3,is_select:true,name:'Phillip Bush',age:22,score:129,gender:'女'}

        ];
        let id = 3;
        const {createApp} = Vue;

        const app = createApp({
            data(){
                return {
                    list:data,
                    UserInfo:{
                    }, //收集用户提交的数据
                    isEdit:false,
                    allBtn:false,
                    // 平均成绩
                    avgScore:0
                }
            },
            methods:{
                sortFunc(type,method){
                    // type id  age score
                    // method asc  desc 
                    method == 'asc'?
                    this.list.sort(function(a,b){return a[type]-b[type]}):
                    this.list.sort(function(a,b){return b[type]-a[type]})
                },

                delFunc(id){
                    this.list = this.list.filter(item=>item.id != id);
                },
                submitHandler(){
                    this.UserInfo.id = ++id;
                    this.UserInfo.is_select = false;
                    this.list.push(this.UserInfo);
                    // 添加完成 重置数据
                    this.UserInfo = {};

                },
                showEdit(item){
                    this.UserInfo = JSON.parse(JSON.stringify(item));
                    this.isEdit = true;
                },
                editFunc(){
                    // 数组.splice(开始的索引,1,插入1个)
                    // console.log(this.UserInfo)
                    // 获取老数据的索引  
                    const index = this.list.findIndex(item=>item.id === this.UserInfo.id)
                    this.list.splice(index,1,this.UserInfo);
                    this.cancelFunc()
                },
                cancelFunc(){
                    this.UserInfo = {};
                    this.isEdit = false;
                }
            

            },
            watch:{
                list:{
                    handler(){
                        const arg = this.list.reduce((prev,item) => {
                            return prev+item.score * 1
                        },0)

                        this.avgScore = arg / this.list.length
                        this.allBtn = this.list.every(item=>item.is_select)
                    },
                    deep:true,
                    immediate:true
                },
                allBtn(mystatus){
                        // console.log(mystatus)
                        // mystatus true 或者false 
                        this.list.forEach(item => {
                            item.is_select = mystatus
                        });
                    }
                }
               
        });


        app.mount('#app')
    </script>
</body>
</html>